<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="Partytown Test Page" />
    <title>Load scripts on main thread</title>
    <script src="./snippet.js"></script>

    <script>
      const config = partytownIntegration.partytownSnippet({
        logCalls: true,
        logGetters: true,
        logSetters: true,
        logStackTraces: false,
        logScriptExecution: true,
        loadScriptsOnMainThread: [
          `${location.protocol}//${location.host}/tests/integrations/load-scripts-on-main-thread/test-script.js`,
          `inline-test-script`,
          `inline-test-script-text`,
          /regex-test-script\.js/,
        ],
      });
      const script = document.createElement('script');
      script.type = 'text/javascript';
      script.innerHTML = config;
      document.head.appendChild(script);
    </script>
    <script type="text/partytown">
      (() => {
        const scriptElement = document.createElement("script");
        scriptElement.type = "text/javascript";
        scriptElement.src = "./test-script.js";
        scriptElement.id = "testScript";
        document.head.appendChild(scriptElement);
      })()
    </script>
    <script type="text/partytown">
      (() => {
        const scriptElement = document.createElement("script");
        scriptElement.type = "text/javascript";
        scriptElement.src = "./regex-test-script.js";
        scriptElement.id = "regexTestScript";
        document.head.appendChild(scriptElement);
      })()
    </script>
    <script type="text/partytown">
      (() => {
        const scriptElement = document.createElement("script");
        scriptElement.type = "text/javascript";
        scriptElement.src = "./background-test-script.js";
        scriptElement.id = "backgroundTestScript";
        document.head.appendChild(scriptElement);
      })()
    </script>

    <style>
      body {
        font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif,
          Apple Color Emoji, Segoe UI Emoji;
        font-size: 12px;
      }

      h1 {
        margin: 0 0 15px 0;
      }

      ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
      }

      a {
        display: block;
        padding: 16px 8px;
      }

      a:link,
      a:visited {
        text-decoration: none;
        color: blue;
      }

      a:hover {
        background-color: #eee;
      }

      li {
        display: flex;
        margin: 15px 0;
      }

      li strong,
      li code,
      li button {
        white-space: nowrap;
        flex: 1;
        margin: 0 5px;
      }
    </style>
  </head>
  <body>
    <h1>Load scripts on main thread 🎉</h1>
    <ul>
      <li>
        <strong>Script Type:</strong>
        <code id="testScriptType"></code>
        <script type="text/partytown">
          (() => {
            const scriptElement = document.getElementById('testScript');
            const codeElement = document.getElementById('testScriptType');

            codeElement.innerText = scriptElement.type;
          })()
        </script>
      </li>
      <li>
        <strong>Script Source:</strong>
        <code id="testScriptSource"></code>
        <script type="text/partytown">
          (() => {
            const scriptElement = document.getElementById('testScript');
            const codeElement = document.getElementById('testScriptSource');

            codeElement.innerText = scriptElement.src;
          })()
        </script>
      </li>
      <li>
        <strong>Inline script with text</strong>
        <code id="testInlineScriptText"></code>
        <script type="text/javascript">
          const globalVariableScriptText = 13;
        </script>
        <script type="text/partytown">
          (function () {
            const script = document.createElement('script');
    
            script.type = "text/javascript";
            script.id = "inline-test-script-text";
    
            script.text = `
              (function () {
                const testEl = document.getElementById('testInlineScriptText');
                testEl.className = 'testInlineScriptText';
                testEl.innerHTML = globalVariableScriptText;
              })();
            `;
            document.body.appendChild(script);
          })();
        </script>
      </li>
      <li>
        <strong>Script ran in the background:</strong>
        <code id="testScriptRanInTheBackground"></code>
        <script type="module">
          import { waitForClass } from './wait-for-class.js';
          (async () => {
            const testScriptRanInTheBackgroundElement = document.getElementById(
              'testScriptRanInTheBackground'
            );
            await waitForClass(document.body, 'completed');
            testScriptRanInTheBackgroundElement.innerText =
              typeof window.testScriptRanInTheBackgroundFlag === 'undefined';
          })();
        </script>
      </li>
      <li>
        <strong>Regex Script Type:</strong>
        <code id="regexTestScriptType"></code>
        <script type="text/partytown">
          (() => {
            const scriptElement = document.getElementById('regexTestScript');
            const codeElement = document.getElementById('regexTestScriptType');

            codeElement.innerText = scriptElement.type;
          })()
        </script>
      </li>
      <li>
        <strong>Regex Script Source:</strong>
        <code id="regexTestScriptSource"></code>
        <script type="text/partytown">
          (() => {
            const scriptElement = document.getElementById('regexTestScript');
            const codeElement = document.getElementById('regexTestScriptSource');

            codeElement.innerText = scriptElement.src;
          })()
        </script>
      </li>
      <li>
        <strong>Regex Script ran in the background:</strong>
        <code id="regexTestScriptRanInTheBackground"></code>
        <script type="module">
          import { waitForClass } from './wait-for-class.js';
          (async () => {
            const regexTestScriptRanInTheBackgroundElement = document.getElementById(
              'regexTestScriptRanInTheBackground'
            );
            await waitForClass(document.body, 'regexp-completed');
            regexTestScriptRanInTheBackgroundElement.innerText =
              typeof window.regexTestScriptRanInTheBackgroundFlag === 'undefined';
          })();
        </script>
      </li>
      <li>
        <strong>Inline script</strong>
        <code id="testInlineScript"></code>
        <script type="text/javascript">
          const globalVariable = 12;
        </script>
        <script type="text/partytown">
          (function () {
            const script = document.createElement('script');

            script.type = "text/javascript";
            script.id = "inline-test-script";
            script.innerHTML = `
              document.getElementById('testInlineScript');

              const testEl = document.getElementById('testInlineScript');
              testEl.className = 'testInlineScript';
              testEl.innerHTML = globalVariable;
              self.inlineTestScriptRanInTheBackgroundFlag = self.name !== '';
              document.body.classList.add('inline-completed');
              `;

            document.body.appendChild(script);
          })();
        </script>
      </li>
      <li>
        <strong>Inline Script ran in the background:</strong>
        <code id="inlineTestScriptRanInTheBackground"></code>
        <script type="module">
          import { waitForClass } from './wait-for-class.js';
          (async () => {
            const inlineTestScriptRanInTheBackgroundElement = document.getElementById(
              'inlineTestScriptRanInTheBackground'
            );
            await waitForClass(document.body, 'inline-completed');
            inlineTestScriptRanInTheBackgroundElement.innerText =
              typeof window.inlineTestScriptRanInTheBackgroundFlag === 'undefined';
          })();
        </script>
      </li>
      <li>
        <strong>Background Script ran in the background:</strong>
        <code id="backgroundTestScriptRanInTheBackground"></code>
        <script type="module">
          import { waitForClass } from './wait-for-class.js';
          (async () => {
            const backgroundTestScriptRanInTheBackgroundElement = document.getElementById(
              'backgroundTestScriptRanInTheBackground'
            );
            await waitForClass(document.body, 'background-completed');
            backgroundTestScriptRanInTheBackgroundElement.innerText =
              typeof window.backgroundTestScriptRanInTheBackgroundFlag === 'undefined';
          })();
        </script>
      </li>
    </ul>

    <hr />
    <p>
      <a href="/tests/integrations/load-scripts-on-main-thread/index.html"
        >Standard loadScriptsOnMainThread</a
      >
    </p>
    <p><a href="/tests/">All Tests</a></p>
  </body>
</html>
